<template>
  <div class="push">
    <!-- 头部 -->
    <van-tabs v-model="active">
      <van-tab title="图片" class="pictures">
        <van-row >         
                <pictures :tab_id="1"></pictures> 
        </van-row>
      </van-tab>

      <van-tab title="文字" class="article">
        <van-row >
                 <articles ></articles>     
        </van-row>
      </van-tab>

      <van-tab title="视频" class="video">
        <van-row >      
                  <videos></videos>
        </van-row>        
      </van-tab>


      <van-tab title="热点" class="News">
       <van-row>
           <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                 <news></news>
           </van-pull-refresh>  
        </van-row>
      </van-tab>
    </van-tabs>

    <!-- 底部标签栏 -->
    <tab-btn></tab-btn>
  </div>
</template>

<script>
import tabBtn from "@/components/tabBtn";
import fooTer from '@/components/fooTer'
import pictures from '@/components/pictures'
import articles from '@/components/artilcles'
import news from './push/news'
import videos from './push/videos'
import { Toast } from 'vant';
export default {
  data() {
    return {
      show: false, 
      value:0,
      clickNum:554,
      active: 0,
      isLoading: false,
    };
  },
  components: {
    tabBtn,
    fooTer,
    pictures,
    articles,
    news,
    videos,
  },
  methods: {
    like:function(){
        this.clickNum=this.clickNum+1
    },
     showPopup() {
      this.show = true;
    },
     onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        
      }, 1000);
    },
  },

};
</script>

<style lang="less" scoped>
@backcolor: #03a9f4;
/deep/ .van-tabs__line {
  background-color: @backcolor;
}
/deep/ .van-image__img {
  padding: 15px;
  border-radius: 50%;
  width: 48%;
  height: 48%;
}
/deep/ .van-tab--active{
  color: @backcolor;
  font-size: 20px;
}
/deep/ .van-tabs__wrap{
  border-bottom: 1px solid lightgray;
}

.author {
  color: #ff9800;
  padding-top: 10px;
  font-size: 17px;
}
.title {
  line-height: 40px;
}
.picture {
  width: 50%;
  padding-left: 30px;
  margin-top: -15px;
}
.gap {
  margin-top: 1px;
  height: 5px;
  background: lightgray;
}
.pictures {
  margin-bottom: 50px;
}

//视频

</style>
